<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_c1pt3aybfaj.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/tabs.css">
    <link rel="stylesheet" href="./css/article.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>

    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="all">
        <div class="tab">
            <div class="tab_tittle">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide tabActive">最新</div>
                        <div class="swiper-slide">推荐</div>
                        <div class="swiper-slide">手机</div>
                        <div class="swiper-slide">笔电</div>
                        <div class="swiper-slide">平板</div>
                        <div class="swiper-slide">沙龙</div>
                        <div class="swiper-slide">影音</div>
                        <div class="swiper-slide">文具</div>
                        <div class="swiper-slide">其他</div>
                        <div class="swiper-slide">周边</div>
                        <div class="swiper-slide">数码</div>
                        <div class="swiper-slide">摄影</div>
                        <div class="swiper-slide">生活</div>
                        <div class="swiper-slide">玩物</div>
                        <div class="swiper-slide">应用</div>
                        <div class="swiper-slide">旅行</div>
                        <div class="swiper-slide">活动</div>
                        <div class="swiper-slide">视频</div>
                    </div>
                </div>
            </div>

            <div class="chose_title">
                <i class="iconfont icon-diandiandian"></i></div>
            <div class="clickShowBox none">
                <div class="clickPopup_box">
                    <i class="iconfont icon-error p_x"></i>
                    <h3 class="clickPopup_sort">排序</h3>
                    <ul class="sort_ul">
                        <li class="sort_name sortActive">最新</li>
                        <li class="sort_name">推荐</li>
                    </ul>
                    <h3 class="clickPopup_title">分类</h3>
                    <ul class="clickPopup_lable">
                        <li><span class="">手机</span></li>
                        <li><span class="">笔电</span></li>
                        <li><span class="">平板</span></li>
                        <li><span class="">沙龙</span></li>
                        <li><span class="">影音</span></li>
                        <li><span class="">文具</span></li>
                        <li><span class="">其它</span></li>
                        <li><span class="">周边</span></li>
                        <li><span class="">数码</span></li>
                        <li><span class="">摄影</span></li>
                        <li><span class="">生活</span></li>
                        <li><span class="">玩物</span></li>
                        <li><span class="">应用</span></li>
                        <li><span class="">旅行</span></li>
                        <li><span class="">活动</span></li>
                        <li><span class="">视频</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="p_content">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
        <div class="p_content none">
            <div class="user_pub">

            </div>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>

    <script>
        let conts = document.querySelectorAll('.user_pub')
        window.onload = () => {
                myput("/article", {
                    num: 0
                }).then(res => {
                    let str = ''
                    res.data.data.forEach((item, index) => {
                        let likes = Math.round(Math.random() * 100)
                        let talks = Math.round(Math.random() * 100)
                        if (item.publish_text != null) {
                            str += ` 
                <div class="articalBar">
                    <div class="user">
                        <div class="user_info">
                            <div class="user_img">
                                <img src="${item.user_img}" alt="">
                            </div>
                            <span class="user_name">
                                ${item.user_name}
                            </span>
                        </div>
                        <div class="publish_time">${item.publish_time}</div>
                    </div>
                    <div class="pub_content">
                        <p class="pub_content_text">${item.publish_text}</p>
                        <div class="publish_img">
                            <div class="img"><img src="${item.img1}" alt=""></div>
                            <div class="img"><img src="${item.img2}" alt=""></div>
                            <div class="img"><img src="${item.img3}" alt=""></div>
                        </div>
                    </div>
                    <div class="pub_foot">
                        <div class="pub_left">
                            <span class="like">
                                <img src="" alt=""><span>${likes}</span>
                            </span>
                            <span class="talk">
                                <img src="" alt=""><span>${talks}</span>
                            </span>
                        </div>
                    </div>
                </div>`
                        }
                    })
                    conts[0].innerHTML = str
                }).catch(err => {
                    console.log(err);
                })
            }
            // 选择改变
        var tabChange = () => {
                let flag = 0
                let nowChose = document.querySelectorAll('.p_content')
                    // 获取当前选中板块
                nowChose.forEach((item, index) => {
                        if (item.classList.value == 'p_content') {
                            flag = index
                        }
                    })
                    // 大标题改变 
                document.querySelectorAll('.tab_tittle .swiper-slide').forEach((item, index) => {
                        index == flag ? item.classList.add('tabActive') : item.classList.remove('tabActive')
                    })
                    // 菜单标题改变
                if (flag > 1) {
                    let menu = document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                        index == flag - 2 ? item.classList.add('sortActive') : item.classList.remove('sortActive')
                    })
                }
                if (flag < 15) {
                    let distance = flag * 3.77
                    document.querySelector('.tab_tittle .swiper-wrapper').style.transform = `translate3d(-${distance}rem, 0px, 0px)`
                } else {
                    let distance = 14 * 3.77
                    document.querySelector('.tab_tittle .swiper-wrapper').style.transform = `translate3d(-${distance}rem, 0px, 0px)`
                }

                myput("/article", {
                    num: flag
                }).then(res => {
                    let str = ''
                    res.data.data.forEach((item, index) => {
                        let likes = Math.round(Math.random() * 100)
                        let talks = Math.round(Math.random() * 100)
                        if (item.publish_text != null) {
                            str += ` 
                <div class="articalBar">
                    <div class="user">
                        <div class="user_info">
                            <div class="user_img">
                                <img src="${item.user_img}" alt="">
                            </div>
                            <span class="user_name">
                                ${item.user_name}
                            </span>
                        </div>
                        <div class="publish_time">${item.publish_time}</div>
                    </div>
                    <div class="pub_content">
                        <p class="pub_content_text">${item.publish_text}</p>
                        <div class="publish_img">
                            <div class="img"><img src="${item.img1}" alt=""></div>
                            <div class="img"><img src="${item.img2}" alt=""></div>
                            <div class="img"><img src="${item.img3}" alt=""></div>
                        </div>
                    </div>
                    <div class="pub_foot">
                        <div class="pub_left">
                            <span class="like">
                                <img src="" alt=""><span>${likes}</span>
                            </span>
                            <span class="talk">
                                <img src="" alt=""><span>${talks}</span>
                            </span>
                        </div>
                    </div>
                </div>`
                        }
                    })
                    conts[flag].innerHTML = str
                }).catch(err => {
                    console.log(err);
                })

            }
            // 菜单框选择
        document.querySelectorAll('.sort_ul li').forEach((item, index) => {
            item.onclick = () => {
                let flag = 0;
                document.querySelectorAll('.sort_ul li').forEach(item => {
                    item.classList.remove('sortActive')
                    flag = index
                })
                item.classList.add('sortActive')
                    // 遍历内容隐藏和显示
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                    item.classList.remove('sortActive')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                document.querySelector('.clickShowBox').classList.add('none')
                tabChange()
            }
        })
        document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                item.onclick = () => {
                    let flag = 0;
                    document.querySelectorAll('.clickPopup_lable li span').forEach(item => {
                        item.classList.remove('sortActive')
                        flag = index + 2
                    })
                    item.classList.add('sortActive')
                        // 遍历内容隐藏和显示
                    document.querySelectorAll('.p_content').forEach(item => {
                        item.classList.add('none')
                    })
                    document.querySelectorAll('.p_content')[flag].classList.remove('none')
                    document.querySelector('.clickShowBox').classList.add('none')
                    tabChange()
                }
            })
            //tab标题切换
        var tab_title = document.querySelectorAll('.tab_tittle .swiper-slide')
        tab_title.forEach((item, index) => {
            item.onclick = () => {
                let flag = 0
                tab_title.forEach(item => {
                    item.classList.remove('tabActive')
                })
                item.classList.add('tabActive')
                flag = index
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                tabChange()

            }
        })

        // 点击排序菜单
        var point9 = document.querySelector('.icon-diandiandian')
        var ShowBox = document.querySelector('.clickShowBox')
        point9.onclick = () => {
            ShowBox.classList.remove('none')
        }
        document.querySelector('.p_x').onclick = () => {
                ShowBox.classList.add('none')
            }
            // 顶部tab切换
        var swiper = new Swiper(".swiper", {
            slidesPerView: 4.3,
            spaceBetween: 30,
            freeMode: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });


        // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
            document.querySelector('.all').classList.add('none')
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
            document.querySelector('.all').classList.remove('none')
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>